<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('上传文件信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <h2 class="text-center">List of Files</h2>

    <div>
      <table class="table table-hover">
        <tbody>
          <tr th:each="item,itemStat: ${items}">
            <td>第[[${itemStat.index+1}]]个</td>
            <td>
            	<table class="table table-hover">
            	<tbody>
		          <tr th:each="file, fileStat:${item.files}">
		            <td>[[${fileStat.index+1}]].[[${file.name}]]</td>
		            <td><a th:href="@{'/fileitem/download/' + ${item.caseId} + '/' + ${item.idx} + '/' + ${file.name}}">下载</a></td>
		            <td>
		              <a th:href="@{'/fileitem/delete/' + ${item.caseId} + '/' + ${item.idx} + '/' + ${file.name}}" th:fileName="${file.name}" id="btnDelete"
		                title="Delete this file" class="fa-regular fa-trash-can icon-dark btn-delete">删除</a>
		            </td>
		          </tr>
	              	<form th:id="|uploadForm${itemStat.index+1}|"
				      method="post"
				      th:action="@{/fileitem/upload}"
				      enctype="multipart/form-data">
				       <input type="text" name="caseId" th:value="${item.caseId}">
				       <input type="text" name="idx" th:value="${item.idx}">
					   <input id="input-file" type="file" name="file" />
				      <button class="btn btn-sm btn-outline-success float-right" type="submit">
				        Upload
				      </button>
			    	</form>
		        </tbody>
		        </table>
            </td>
            <td>
              <span th:if="${item.idx==curIdx}">
			    <div
      			  th:if="${message != null}"
			      class="alert alert-secondary alert-dismissible fade show text-center message mt-3"
			      role="alert">
			              [[${message}]]
			      <button type="button" class="close btn-sm" data-dismiss="alert" aria-label="Close">
			        <span aria-hidden="true">&times;</span>
			      </button>
			    </div>
			  </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  
  <div class="modal fade text-center" id="confirmModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Delete Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  
        <div class="modal-body">
          <span id="confirmText"></span>
        </div>
  
        <div class="modal-footer">
          <a type="button" id="yesBtn" class="btn btn-danger">Yes</a>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
        </div>
      </div>
    </div>
    </div>
    
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
			<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    
	<script type="text/javascript">
		window.onload=function () {
		}
	</script>
	
  <script type="text/javascript">
    $(document).ready(function () {
      $(".btn-delete").on("click", function (e) {
        e.preventDefault();
        link = $(this);

        fileName = link.attr("fileName");
        $("#yesBtn").attr("href", link.attr("href"));
        $("#confirmText").html("Do you want to delete the File: \<strong\>" + fileName + "\<\/strong\>?");
        $("#confirmModal").modal();
      });
    });
  </script>

</body>
</html>